<%@page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" %>
<%@ include file="/WEB-INF/jsp/commons/includes.jsp"%>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> -->
    <title>Document</title>
    <link rel="stylesheet" href="${ctx}/front/css/index.css">
    <style>
        .load-msg{
            position: absolute;
            left:50%;
            top:50%;
            font-size:40px;
            color:#FFFFFF;
            -webkit-transform: translate3D(-50%,-50%,0);
            transform: translate3D(-50%,-50%,0);
        }

        body {
            background-size: cover;
            background-image: url(${ctx}/front/img/bg.png);
        }
    </style>
</head>
<body>
<input type="hidden" id="ctxContent" value="${ctx}" />
<input type="hidden" id="classId" value="${classId}" />
<input type="hidden" id="originalId" value="${originalId}" />
<span class="load-msg" id="load-msg">下载中......</span>
<canvas width="1024" height="768" class="game-bg" id="gameView"></canvas>
</body>
<script src="${ctx}/front/js/common/flexible.js"></script>
<script src="${ctx}/front/js/vendor/createjs-2015.11.26.min.js"></script>
<script src="${ctx}/front/js/vendor/tweenjs-0.6.2.min.js"></script>
<script src="${ctx}/front/js/vendor/easeljs-0.8.2.min.js"></script>

<script src="${ctx}/front/js/common/canvas.js"></script>
<script src="${ctx}/front/js/vendor/jquery-2.1.1.min.js"></script>

<script src="${ctx}/front/js/common/CFormatText.js"></script>
<script src="${ctx}/front/js/common/settings.js"></script>
<script src="${ctx}/front/js/common/ctl_utils.js"></script>
<script src="${ctx}/front/js/common/CToggle.js"></script>
<script src="${ctx}/front/js/songdu/CFormatVerticalText.js"></script>
<script src="${ctx}/front/js/songdu/CMain.js"></script>
<script src="${ctx}/front/js/songdu/CGame.js"></script>

<script>
    $(document).ready(function () {
        <%--// TODO 从后台读取数据--%>
        <%--var oDataInfo = {'key': 'key2', 'menu': '第二课 白鸽与喜鹊', 'title': '白\n鸽\n与\n喜\n鹊', 'content': '白鸽牙损坏，说话有困难\n呜呀呀，唉吧吧\n讲不清楚，顿足挠腮\n甚至恨自己，叼啄蹦踢跳\n\n急躁小喜鹊，遥远初到来\n误会白鸽，故作姿态\n批评责备，产生裂痕\n矛盾挺尖锐，干脆不理睬\n\n过后识真相，后悔不应该\n牵挂白鸽，探访抚慰\n希望谅解，含蓄表白\n和平相拥抱，逗趣笑开怀', 'sou': 'chuhe', 'src': '${ctx}/front/mp3/08.mp3'};--%>
        <%--var oMain = new CMain(oDataInfo);--%>
        $.post(
                '${ctx}/rest/original/post/${classId}/${originalId}.shtml',
                {},
                function(data) {
                    var oMain = new CMain(data.info);
                },
                'json'
        );
    });

</script>

</html>